<template>
  <div class="section-wrapper">
    <h1>
      Desktop notifications
    </h1>
    <h3>
      The <code>notification</code> module in Electron allows you to add basic
      desktop notifications.
    </h3>

    <p>
      Electron conveniently allows developers to send notifications with the
      <a href="https://notifications.spec.whatwg.org/">HTML5 Notification API</a
      >, using the currently running operating system’s native notification APIs
      to display it.
    </p>

    <p>
      <b>Note:</b> Since this is an HTML5 API it is only available in the
      renderer process.
    </p>

    <p>
      Open the
      <a
        href="https://electron.atom.io/docs/all/#notifications-windows-linux-macos"
        >full API documentation<span class="u-visible-to-screen-reader"
          >(opens in new window)</span
        ></a
      >
      in your browser.
    </p>
    <button class="demo-button" id="basic-noti" @click="click1">
      View demo
    </button>
    <el-button type="primary" @click="click2" ref="notifi">普通通知</el-button>
    <el-button type="primary" @click="click3" ref="notifi">图片通知</el-button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: true,
    }
  },
  mounted() {},
  methods: {
    dump() {
      console.log('啊哈哈哈')
    },
    click1() {
      const notification = {
        title: 'Basic Notification',
        body: 'Short message part',
      }

      const notificationButton = document.getElementById('basic-noti')

      notificationButton.addEventListener('click', () => {
        const myNotification = new window.Notification(
          notification.title,
          notification
        )

        myNotification.onclick = () => {
          console.log('Notification clicked')
        }
      })
    },
    click2() {
      const notification = {
        title: 'Basic 234234',
        body: 'Short message 435',
      }

      // const notificationButton = this.$refs.notifi;

      const myNotification = new window.Notification(
        notification.title,
        notification
      )

      //   notificationButton.addEventListener("click", () => {
      //     const myNotification = new window.Notification(
      //       notification.title,
      //       notification
      //     );

      //     myNotification.onclick = () => {
      //       console.log("Notification clicked");
      //     };
      //   });
    },
    click3() {
      const path = require("path");

      const notification = {
        title: "Notification with image",
        body: "Short message plus a custom image",
        icon: path.join(__dirname, "../../../renderer/assets/img/programming.png"),
      };
    //   const notificationButton = document.getElementById("advanced-noti");

        const myNotification = new window.Notification(
          notification.title,
          notification
        );

    //   notificationButton.addEventListener("click", () => {
    //     myNotification.onclick = () => {
    //       console.log("Notification clicked");
    //     };
    //   });

    },
  },
}
</script>

<style lang="scss" scoped></style>
